<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 14 - Masking</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>

    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>
    <script>

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0xFFFFFF, true);

    stage.interactive = true;

    var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
    bg.anchor.x = 0.5;
    bg.anchor.y = 0.5;

    bg.position.x = 620/2;
    bg.position.y = 380/2;

    //stage.addChild(bg);


    
    //stage.addChild(bgFront);

    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(620, 380);

    renderer.view.style.position = "absolute"
    renderer.view.style.marginLeft = "-310px";
    renderer.view.style.marginTop = "-190px";
    renderer.view.style.top = "50%";
    renderer.view.style.left = "50%";
    renderer.view.style.display = "block";

    // add render view to DOM
    document.body.appendChild(renderer.view);

    // lets create moving shape



    var mask2 = new PIXI.Graphics();
    mask2.beginFill(0);
    mask2.drawCircle(620/2, 380/2, 300)

    var container = new PIXI.DisplayObjectContainer();
    stage.addChild(container);
    container.addChild(bg);



    container.mask = mask2;



    for (var i = 0; i < 4; i++) 
    {
        var bear = PIXI.Sprite.fromImage("panda.png");
        
        var mask1 = new PIXI.Graphics();
        mask1.beginFill(0);
        mask1.drawRect(20, 40, 100, 100)
        bear.mask = mask1;
        bear.addChild(mask1);
        container.addChild(bear);

        bear.position.x = i * 50;
    };
    


    var count = 0;

    stage.click = stage.tap = function()
    {
        if(!container.filter)
        {
            container.mask = thing;
        }
        else
        {
            container.mask = null;
        }
    }

    /*
     * Add a pixi Logo!
     */
    var logo = PIXI.Sprite.fromImage("../../logo_small.png")
    stage.addChild(logo);

    logo.anchor.x = 1;
    logo.position.x = 620
    logo.scale.x = logo.scale.y = 0.5;
    logo.position.y = 320
    logo.interactive = true;
    logo.buttonMode = true;

    logo.click = logo.tap = function()
    {
        window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
    }

    var help = new PIXI.Text("Click to turn masking on / off.", {font:"bold 12pt Arial", fill:"white"});
    help.position.y = 350;
    help.position.x = 10;
    stage.addChild(help);

    requestAnimFrame(animate);

    function animate() {

        bg.rotation += 0.01;
    
        count += 0.1;



        renderer.render(stage);
        requestAnimFrame( animate );
    }

    </script>

    </body>
</html>
